import React, { useEffect, useState } from 'react'
import styles from './index.module.css'
import { NavBar, InfiniteScroll, Switch } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Collapse } from 'antd-mobile'
import http from '../../utils/http'
import { useSelector } from 'react-redux'
import logon from '../../images/image.png'
function Index() {
    let navigate = useNavigate()
    const { start, end, date } = useSelector((state) => state.CitySlice)
    const [hasMore, setHasMore] = useState(true)
    const [isSpeed, setIsSpeed] = useState(false)
    const [isSeat, setIsSeat] = useState(false)
    const [isDesc, setIsDesc] = useState(false)
    const [page, setpage] = useState(1)
    // 定义接收列表变量
    let [list, setList] = useState([])
    const getList = async () => {
        // 连接列表接口
        const res = await http.post('/api/trip/train', {
            start,
            end,
            date,
            isSpeed,
            isSeat,
            isDesc,
            page
        })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            setList([...list, ...data])
            setpage((prev) => prev + 1)
        }

        if(data.length<1){
            setHasMore(false)
        }

    }

    useEffect(() => {
        getList()
    }, [])

    const handleTick = (item) =>{
        navigate('/detail',{state:item})
    }
    return (
        <div>
            <div className={styles.top_wroe}>
                <NavBar onBack={() => navigate(-1)}>合肥-南京</NavBar>
                <img src={logon} alt="" style={{ width: '100%' }} />
            </div>
            <div>
                <Collapse arrowIcon>
                    {
                        // 列表数据获取成功后渲染在页面上
                        list?.map((item, ind) => (
                            <Collapse.Panel key={ind} title={
                                <div className={styles.box_wroe}>
                                    <div className={styles.left_wroe}>
                                        <span>{item.start}</span>
                                        <span>{item.startTime}</span>
                                        <span>{item.end}</span>
                                        <span>一等座<b>有票</b></span>
                                        <span>二等座<b>有票</b></span>
                                        <span>三等座<b>有票</b></span>
                                    </div>
                                    <div className={styles.right_wroe}>
                                        <b onClick={()=>handleTick(item)}>￥{item.tick.secondTick}</b>
                                    </div>
                                </div>
                            }>
                                <b>以下为普通列车</b>
                            </Collapse.Panel>
                        ))
                    }
                </Collapse>
                {/* 下拉刷新 */}
                <InfiniteScroll loadMore={getList} hasMore={hasMore} />
            </div>
            <div className={styles.bom_wroe}>
                <div>
                    <Switch
                        checkedText={isDesc}
                        onChange={(val) => {
                            setIsDesc(val)
                            setpage(1)
                            getList([])
                        }}
                    />
                    筛选
                </div>
                <div>
                    <Switch
                        checkedText={isSeat}
                        onChange={(val) => {
                            setIsSeat(val)
                            setpage(1)
                            getList([])
                        }}
                    />
                    出发时间
                </div>
                <div>
                    <Switch
                        checkedText={isSpeed}
                        onChange={(val) => {
                            setIsSpeed(val)
                            setpage(1)
                            getList([])
                        }}
                    />
                    旅行耗时
                </div>
            </div>
        </div>
    )
}

export default Index
